<template>
  <div class="w12 dld_body">
    <div class="jl_form">
      <div class="jl_form_item" @click="open">
        <span class="w04" style="color: gray"><em class="font_red" v-if="required">*</em>{{label}}</span>
        <span class="w08 tr">{{addressName || '请选择省市区'}}</span>
        <i class="fa fa-angle-right"></i>
      </div>
      <textarea class="w12 pr15 mb10" placeholder="请输入详细地址，街道，门牌号等。"
                v-model="detailJson.VALUE"></textarea>
    </div>

    <div class="settlement_modal" v-if="show">
      <div class="settlement_modal_bg" @click="close"></div>
      <div class="address_add">
        <h3>选择地区</h3>
          <ul class="address_add_tab">
            <div  v-for="(item,index) in tabsList" :key="index">
              <li :class="{'true':'xuan'}[getTabsSelected(item)]"
                  @click="changeTabs(item)">
                {{item['VALUE']}}
              </li>
            </div>
          </ul>
          <div class="address_add_main">
            <div v-for="(item,index) in contentList" :key="'i'+index">
              <span :class="{'true':'xuan'}[isSelected(item)]" @click="selected(item)">
                {{item['VALUE']}}
                <template v-if="isSelected(item)">
                  <i class="fa fa-check"></i>
                </template>
              </span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as http from '../plugins/http'

  export default {
    name: 'jl-address',
    props: {
      label: {
        type: String
      },
      required: {
        type: Boolean,
        default: false
      },
      value: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        tabs: {},
        tabsCard: {},
        tabsList: [{
          VALUE: '请选择'
        }],
        contentList: [],
        show: false,
        addressName: '',
        detailJson: {KEY: '0', VALUE: ''},
        selectedAddress: []
      }
    },
    methods: {
      open() {
        this.show = true
      },
      close() {
        this.show = false
      },
      getTabsSelected(item) {
        let flag = false
        if ($Util.isNull(this.tabsCard)) {
          flag = this.tabsList.length == this.tabsList.indexOf(item) + 1
        } else {
          flag = this.tabsCard['KEY'] == item['KEY']
        }
        return flag
      },
      selected(item) {
        this.tabs = item
        this.tabsCard = {}
        this.tabsList.length = item['LEVELS']
        this.tabsList[item['LEVELS'] - 1] = item
        if (item['MJBJ'] == 0) {
          this.tabsList[item['LEVELS']] = {VALUE: '请选择'}
          this.contentList = []
          this.getContentList(item['KEY'])
        } else {
          let tabsList = []
          let n = 0
          for (let i = 0; i < this.tabsList.length; i++) {
            let tab = this.tabsList[i]
            if (n == 1) break
            if (item['KEY'] == tab['KEY']) n = 1
            tabsList.push(tab)
          }

          this.selectedAddress = tabsList

          this.show = false
        }
      },
      isSelected(item) {
        let flag = item['KEY'] == this.tabs['KEY']
        if (flag) {
          let element = document.getElementById(item['KEY'])
          if (element) element.scrollIntoView()
        }
        return flag
      },
      changeTabs(item) {
        let parent
        if (item['KEY']) {
          parent = this.tabsList[item['LEVELS'] - 2] || {}
          this.tabs = item
          this.tabsCard = item
        } else {
          parent = this.tabsList[this.tabsList.length - 2] || {}
          this.tabsCard = {}
        }
        this.contentList = []
        this.getContentList(parent['KEY'])
      },
      async getAddressListByKey(key) {
        let address = await this.getAddressByKey(key)
        let list = [address]
        for (let i = address['LEVELS'] - 1; i >= 1; i--) {
          let item = await this.getAddressByKey(address['LAST'])
          list.push(item)
        }
        list = list.reverse()
        if (list[list.length - 1]['MJBJ'] == 0) {
          list.push({VALUE: '请选择'})
        }
        return list
      },
      getAddressByKey(key) {
        return new Promise(resolve => {
          let params = {}
          if (parent) params['DQXX01'] = key
          http.get('/JLInterface/getDQXX.do', {
            XmlData: JSON.stringify(params)
          }).then(v => {
            let list = v.data['returnList'] || []
            if (!$Util.isNull(list)) resolve(list[0])
          })
        })
      },
      getContentList(parent) {
        let params = {}
        if (parent) params['PARENT'] = parent
        http.get('/JLInterface/getDQXX.do', {
          XmlData: JSON.stringify(params)
        }).then(v => {
          let data = v.data['returnList'];
          for (let i = 0; i < data.length; i++) {
            data[i]['id'] = data[i]['KEY'];
            data[i]['index'] = data[i]['LEVELS']
          }
          this.contentList = data || []
        })
      },
      getAddressName() {
        let data = this.selectedAddress
        let addressName = ''
        for (let i = 0; i < data.length; i++) {
          if (i > 0 && data[i - 1].MJBJ == 1) {
            break
          }
          addressName += data[i].VALUE
          if (data[i].MJBJ != 1) addressName += '-'
        }
        this.addressName = addressName
      },
      init() {
        try {
          let addressList = [...[], ...this.value]

          let adcode = sessionStorage.getItem('AMap.adcode')
          let parent = adcode
          if (!$Util.isNull(addressList)) {
            for (let i = 0; i < addressList.length; i++) {
              if (i > 0 && addressList[i].MJBJ == 1) {
                parent = addressList[i - 1]
              }
              if ($Util.isNull(addressList[i].MJBJ)) {
                this.detailJson = addressList[i]
                addressList.splice(i, 1)
              }
            }
            this.selectedAddress = addressList
            this.tabsList = addressList
            parent = parent['KEY']
          } else if (adcode) {
            this.getAddressListByKey(adcode).then(v => {
              this.tabsList = v
            })
          }
          this.getContentList(parent)
        } catch (e) {
        }
      },
      sendData() {
        let res = [...[], ...this.selectedAddress]
        res.push(this.detailJson)
        this.$emit('input', res)
      }
    },
    created() {
      this.init()
    },
    watch: {
      detail() {
        this.sendData()
      },
      selectedAddress() {
        this.getAddressName()
        this.sendData()
      }
    }
  }
</script>

<style scoped>
  .dld_body{ float: left; width: 100%; background: #fff;}
  .dld_body button{ float: left; padding: 6px 15px; margin: 10px; font-size: 1.6rem; border-radius: 3px; background: #fff; border: 1px solid var(--color); color: var(--color);}
  .dld_body button.xuan{ background: var(--color); color: #fff;}
  .dld_body textarea{ border: 0px; font-size: 1.5rem !important;}
  .jl_form:active{ background:#f1f1f1;}
  .jl_form_item{ padding:15px 35px 15px 0; float:left; width:100%; line-height:20px; font-size:1.2rem !important; position:relative; margin-bottom:-1px;}
  .jl_form_item > i{ width:20px; height:20px; text-align:right; line-height:20px; padding:0px; position: absolute; top:50%; margin-top:-10px; right:10px; font-size:2.2rem !important; color:#999; }
  .jl_form_item > input{ border:0px !important; line-height:20px !important; padding:0px;}
  .jl_form_item > textarea{ border:0px !important; padding:0px !important; line-height:20px; text-indent:0px;}
  .jl_form_item > span > div.img{ width: 20px; height: 20px; float: right; overflow: hidden; margin:10px 10px 0 0;}
  .jl_form_item > span > div.img img{ width: 20px;}
  .jl_form_item > span.form_img_list{ margin-top: -10px;}
  .jl_form_item.jl_form_icon{ padding-left:35px;}
  .jl_form_item.jl_form_icon .form_icon{ width:30px; height:30px; line-height:30px; font-size:20px; position:absolute; left:0; top:9px;}
  .jl_form_item.jl_form_icon .form_icon img{ width:100%;}
  .jl_form_item.jl_form_img{ padding-left:70px; min-height:84px;}
  .jl_form_item.jl_form_img .form_img{ width:60px; height:60px; position:absolute; left:0; top:10px; text-align: center;}
  .jl_form_item.jl_form_img .form_img img{ width:100%;}
  .jl_form_item.jl_form_img .form_img i{ color: #fff; font-size: 30px; line-height: 60px;}
  .jl_form_item.jl_form_rightImg img{ width:60px;}
  .jl_form_item.jl_form_rightImg span{ line-height:60px;}
  .settlement_modal{ position: fixed; width: 100%; top: 0px; height: 100%; border-bottom: 1px solid #e4e4e4; z-index: 999;}
  .settlement_modal_bg{ position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 1;}
  .settlement_modal_main{ position: absolute; width: 86%; z-index: 2; overflow: hidden; height: 170px; top: 50%; margin-top: -85px; left: 7%; background: #fff; border-radius: 5px;}
  .settlement_modal_main.two{ height: 240px; margin-top: -120px;}
  .settlement_modal_main.thr{ height: 320px; margin-top: -160px;}
  .settlement_modal_main h3.settlement_modal_header{ font-size: 1.6rem; margin: 0px; padding: 20px; text-align: center;}
  .settlement_modal_main .settlement_modal_body{ max-height: 210px; overflow-y: auto;}
  .settlement_modal_main .settlement_modal_footer{ position: absolute; bottom: 0px; width: 100%;}
  .settlement_modal_main .settlement_modal_footer button{ height: 40px; color: #fff;}
  .settlement_modal_main .settlement_modal_footer button.left{ background: #fff; color: #000; border-top: 1px solid #e4e4e4;}

  .settlement_modal_main .settlement_modal_body textarea{float:left;width:100%;height: 60px;border:0px;padding: 0 10px;}

  .address_add{ position: fixed; width: 100%; height: 70%; background: #fff; bottom: 0px; left:0px; z-index: 999; padding: 10px;}
  .address_add h3{ font-size: 1.6rem; float: left; margin: 0px 0px 10px 0; width: 100%;}
  .address_add .address_add_tab{ float: left; width: 100%; height: 30px; border-bottom: 1px solid #eee;}
  .address_add .address_add_tab li{ float: left; line-height: 30px; margin-left: 20px;}
  .address_add .address_add_tab li:first-child{ margin-left: 0px;}
  .address_add .address_add_tab li.xuan{ border-bottom: 1px solid var(--color); height: 30px; color: var(--color)}
  .address_add .address_add_main{ float: left; width: 100%; height: calc(100% - 70px); overflow-y: auto; padding: 10px 0;}
  .address_add .address_add_main span{ float: left; width: 100%; line-height: 30px;}
  .address_add .address_add_main span.xuan{ color: var(--color);}
  .address_add .address_add_main span.xuan i{ margin-left: 10px; color: var(--color); line-height: 30px;}
</style>
